<template>
  <div>
    <main class="el-main">
      <div data-v-612b7776 id="about" name="about" class="about">
        <div data-v-612b7776 class="about-header">
          <div data-v-612b7776 class="about-title">
            <i
              data-v-36792e99=""
              class="el-icon-shopping-cart-full"
              style="color: rgb(255, 103, 0); font-weight: 600"
            ></i>
            我的购物车
            <span class="sp"
              >温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span
            >
          </div>
        </div>
      </div>
    </main>
    <div class="Carts">
      <div class="cart">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" label="全选" width="75">
          </el-table-column>
          <el-table-column prop="productName" width="100">
            <template slot-scope="scope">
              <img
                style="height: 80px; width: 80px"
                :src="'api' + scope.row.productImg"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="productName" width="420">
          </el-table-column>
          <el-table-column prop="price" label="单价" width="120">
          </el-table-column>
          <el-table-column label="数量" width="220" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.num"
                @change="handleChange(scope.row)"
                :min="1"
                label="描述文字"
              ></el-input-number>
            </template>
            <!-- <el-input-number v-model="nums" :step="2"></el-input-number -->
            ></el-table-column
          >
          <el-table-column label="小计" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.price * scope.row.num }}元
            </template>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-popover placement="top" width="160" v-model="visible">
                <p>这是一段内容这是一段内容确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="primary" size="mini">确定</el-button>
                </div>
                <span slot="reference" @click="deletes(scope.row)">
                  <i class="el-icon-error ii"></i
                ></span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="foot">
          <div>
            <span style="margin-right: 20px">继续购物</span>
            <span
              >共{{ this.$store.getters.num }}件商品，已选择{{
                this.$store.getters.nums
              }}件</span
            >
          </div>
          <div>
            <span class="heji">合计:{{ this.$store.getters.sum }}</span>
            <span
              :class="this.$store.getters.sum !== 0 ? 'jiesuan1' : ''"
              class="jiesuan"
              @click="tiao"
              >去结算</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../../API/Api";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      visible: false,
      multipleSelection: [],
      banduan: false,
    };
  },
  mounted() {
    API.getShoppingCart({ user_id: this.$store.state.user_id }).then((res) => {
      console.log(res);
      this.tableData = res.shoppingCartData;
      this.$store.commit("cartList", res.shoppingCartData);
    });
  },
  methods: {
    handleChange(row) {
      // console.log(row.num);
      let obj = {
        num: row.num,
        product_id: row.productID,
        user_id: this.$store.state.user_id,
      };
      API.updateShoppingCart(obj).then((res) => {
        console.log(res);
      });
    },
    deletes(row) {
      let del = {
        product_id: row.productID,
        user_id: this.$store.state.user_id,
      };
      API.deleteShoppingCart(del).then((res) => {
        console.log(res);
        this.visible = false;
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.banduan = true;
      this.$store.commit("cartLists", val);
    },
    tiao(){
        if(this.$store.getters.sum !== 0){
          return this.$router.push('confirmOrder')
        }
    }
  },
  computed: {},
  components: {},
  watch: {},
  getters: {},
};
</script>

<style scoped>
.el-main {
  background-color: #f5f5f5;
}
.about-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
  background-color: #fff;
}
.about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.markdown-body h1 {
  font-size: 2em;
}
.about-content {
  width: 1225px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 40px;
}
.about-content h1 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
  padding: 24px 0 16px;
}
.about-content h2 {
  border-bottom: 1px solid #eaecef;
  padding: 24px 0 16px;
}
.sp {
  color: #757575;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  margin-top: 30px;
  margin-left: 15px;
}
.Carts {
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
.cart {
  margin: 0 auto;
  width: 1225px;
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.foot {
  width: 1225px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foot span {
  margin-left: 30px;
}
.jiesuan {
  float: right;
  width: 200px;
  height: 50px;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
  background: #e0e0e0;
  color: #b0b0b0;
  font-size: 18px;
}
.jiesuan1 {
  background: orange;
  color: #fff;
}
.heji {
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: orange;
  font-size: 22px;
}
.el-input-number {
  width: 130px;
}
.ii:hover {
  border-radius: 50%;
  background: #ff6700;
}
</style>